css - Website scroll not working on SAFARI

admin管理员组

文章数量:1127654

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed last year.

Improve this question

I have a site here missnationglobal. Scrolling works fine on Chrome and other browsers except safari.

I checked the css markup for the site and don't seem to be able to figure out what is causing it, here's some code:

html {
  height: 100% !important;
  width:100%;
  overflow-x: hidden !important;

  overflow:scroll;
  -webkit-overflow-scrolling: touch; 
  -webkit-overflow-y: auto; /* added css prefix for safari */

}
body {
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  margin:0;
  }

Any help is appreciated!

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed last year.

Improve this question

I have a site here missnationglobal.com. Scrolling works fine on Chrome and other browsers except safari.

I checked the css markup for the site and don't seem to be able to figure out what is causing it, here's some code:

html {
  height: 100% !important;
  width:100%;
  overflow-x: hidden !important;

  overflow:scroll;
  -webkit-overflow-scrolling: touch; 
  -webkit-overflow-y: auto; /* added css prefix for safari */

}
body {
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  margin:0;
  }

Any help is appreciated!

• css

Share Improve this question asked Nov 13, 2019 at 9:01 Pbalazs89Pbalazs89 11511 silver badge1212 bronze badges 3

• try with overflow-y: scroll; -webkit-overflow-scrolling: touch; – Chetan Vaghela Commented Nov 13, 2019 at 9:07
• Hi, tried it, unfortunately it does not work. – Pbalazs89 Commented Nov 13, 2019 at 9:12
• Well here's the thing, I inherited this wordpress site. I tried removing all the css in style.css, but even that doesn't fix it. I tried changing the theme, and disabling all plugins, but that did not help at all either. – Pbalazs89 Commented Nov 13, 2019 at 9:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I have been having this same issue. I believe this is more of a limitation of Safari than it is an issue of your creation. The only "tricks" I was able to find online are

overflow-y: scroll; 
-webkit-overflow-scrolling: touch;

I have added this to my container and child elements with no luck. I even added a pseudo element that was slightly bigger than the container hoping to trigger the scroll-bar on load, but this did not work either.

Lastly, I tried adding scroll-bar styles to the container hoping that would force it, but as you probably can guess: no dice.

I reached out directly to Safari technical support, and I hope to have an updated answer within the next couple of days. If anyone has come up with a working solution, please let me know!

本文标签： cssWebsite scroll not working on SAFARI