im facing an issue with position sticky on direction RTL html, I have a table in which the first td of the thead and tbody have position sticky with right: 0;, on scroll x, the table parent container has overflow-x: scroll; overflow-y: auto; white-space: nowrap;!! everything works fine even on chrome dev tools, firefox, and also codepen its working, but when I open the same thing on my iphone the position sticky is stuck to the left, like this, enter image description here but the left side looks like this, enter image description here, also when the scroll x-direction happens the sticky elements diasporas and comes back non stop, anyone knows why?
thank you.
codepen - https://codepen.io/shammlo/pen/rNMeZNe?editors=1100
Safari (on all platforms) has always glitched when using position:sticky with right or left in RTL reading direction. I am not aware of any open WebKit bug for this or any plan to address the issue. I suggest you open a WebKit bug, and for the foreseeable future, not use sticky in this way for RTL direction.
Related
I have images that are on the left and right that are to become sticky while scrolling.
I am using position:-webkit-sticky; position:sticky; for the class stuck. It is working fine on Chrome and Firefox, but not Safari.
I don't have any overflow:auto or display:flex that would be affecting it. I have seen other demos where position: -webkit:sticky works on Safari. I just can't figure out why it isn't working on my page
Here is the page, you have to scroll down to the Celebration section to see it.
https://www.kingswaychurch.org/annual-report/
Thanks!
I figure it out. There was a div above it in the code that wasn't floated. On one side it was floated, which worked, and the other side it wasn't, which didn't work. I think sticky position was relaying on the closest div.
That is my best guess.
I have recently noticed that when you have a div containing overflowed content that is scrollable, in chrome, you can smoothly transition scrolling from that div to the rest of the body, but in Safari, you can not. Instead of smoothly transitioning, the scrolling stops when you reach the top or bottom of the contained element, and you must scroll again to begin scrolling on the body. It is vital to the project I am working on that I allow Safari to scroll smoothly the same way Chrome does. For the life of me I can not figure out how to do this. Any input is appreciated, thank you for your time!
You can try my go to settings for a CSS element that is scrollable. Although I can't help you too much without seeing your code, try implementing these:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I usually apply these for iOs devices and it does the trick. Not 100% sure if it will help your problem.
Safari separates scroll gestures for different elements on purpose so that the user can clearly tell what element is being scrolled.
Of course, you can use JavaScript to solve this in a hacky way. For example, you can set the ScrollTop of body to the amount that the user scrolled when the div has reached to the bottom.
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
I have a blog that I'm having a slight styling (CSS) issue in Chrome only. For reference the blog is located here.
The issue is that (in Chrome only) when I scroll the content should go under the nav bar (but over the top of the big image), but it goes over. Again, this issue only exists in Chrome.
I'm not sure where to even start, but I'm hoping y'all will have a few tips for me. Thanks!
The issue was actually fairly simple and had to do with the positioning of the header elements.
I changed #header_area .page to position: absolute, and #header_area .Nav to position: fixed. I also gave #header_area .header a top margin of 70px and made that position: fixed as well.
Anybody's got ideas, how to get around the problem that scrolling horizontally clears div background colors/images.
There's a similar problem example for example on www.f-i.com.
If the browser window is small enough to display horizontal scolling and then you scroll to right the content gets hidden (probably the background color of the divs get replaced by body background color... or something)
This happens at least with current versions of Mac Chrome and Safari.
I'm using 960.gs if it has anything to do with that..
Thanks in advance,
Harry S
On the www.f-i.com site, if you look carefully the div.main has overflow: hidden;
If you remove this it all works fine.