I've got shadow scrollable elements whose scrolling is linked to the scroll offsets of other elements: https://henrybuilt.github.io/react-sticky-table/
For some reason, I can't get them to appear in Safari on OSX when scrollbars are set to always show. Modifying the z-index after page-load using the dev controls appears to affect them, but not consistently. The scrollbars render just fine in other browsers.
What is causing this rendering issue and how can I fix it?
Related
I have a div with style overflow:hidden and white-space:nowrap. Then a button that scrolls the div left via scrollLeft += 50. Works fine until I add scroll-behavior:smooth to the CSS of the div. Then it doesn't scroll at all in Safari 15.4. On all other browsers I have tested it works fine. Some ignore the smooth scrolling but it doesn't break the scrolling. In Safari it breaks the scrolling. I have setup a simple test page for this error scrolling test. What am I doing wrong? If this is a bug in Safari any ideas for workarounds?
This is a bug as of Safari 15.4.
Previously, it didn't support smooth scrolling and would scroll instantly. Since the new update, they have introduced an incomplete version of smooth scrolling, the scrollbar is required to be visible for it to work.
The current workarounds are to either use a scrolling library, making your own version/polyfill or checking useragent and give it a version without smooth scrolling if it's Safari.
WebKit Bugzilla Link: https://bugs.webkit.org/show_bug.cgi?id=238497
Safari-specific:
I have got a page which is simply a background with an iframe centered in it. The iframe uses transform animations on :hover, and these cause the iframe content to make a little unwanted 1-pixel shift to the left only in Safari (tested in Chrome & Firefox).
I'm not sure what might be causing Safari to do this.
My iframe is width: 100%, so presumably the frame itself isn't
shifting, only the content.
The shift only lasts for the duration of the animation, not the hover.
The shift doesn't occur on the page that is the source of the iframe content, only once it is displayedcwithin the iframe.
Has anyone encountered this issue in Safari?
Page with Safari issue: http://www.bladesnpc.com/index-02.html
Content within iframe: https://perchance.org/blades-npc
I am managing the element centering with flex. Changing the flex-direction to column solved the Safari problem—although this particular fix only works because I am centering a single element on the page.
I have recently encountered an issue in Opera, where it attempts to display scrollbar on a position:absolute+overflow:auto parent, when the child element has more content but with max-height set.
To illustrate the scenario, view this demo: http://jsfiddle.net/kMZKm/12/
Changing the positioned element to have a fixed height, or changing the inner element to use height:100% instead of max-height:100%, will not trigger the scrollbar in Opera.
Other browser such as Chrome, Firefox or IE, does not display scrollbar in neither scenarios.
I am wondering if this is a bug in Opera (appear in both ver.11 and 12), or just an undefined scenario in w3c spec?
(it might seem counter-intuitive to have overflow:auto parent with max-height children, but the setup is actually quite useful for things like javascript scrolling, Opera's behaviour cause unexpected height of child element to be reported, thus breaking the custom scroll)
If you zoom out, the scrollbar appears in the other browsers as well. A changelog may be the reason: Spatial navigation in an overflow:hidden box not scrolling
My site http://bit.ly/aokA4I has a search bar on the top right.
You can see it on IE7, FF, Chrome, Safari -- but not on IE8. It gets chopped off.
BTW if you happen to see it on IE8 just refresh the page and it will chop.
If I run IE8 on compatibility mode the search bar becomes visible.
Any ideas how to solve this?
Thanks!!
It's because IE8 is interpreting the nature of its parent container: header_widget_1. The sizing or formatting of this element is causing the <li> element to be clipped prematurely. If you have Google Chrome, you can right click the sidebar element you're asking about and choose "Inspect Element". This will show you what the elements are doing.
Edit: You also have a sizable horizontal scrollbar in IE7.
Edit 2:
You might try altering the height of your #header element to be the height you want. Since height is not expressed in the sidebar class, this may also be contributing to the problem.
I have a calendar that is a table. For some reason, IE is adding a vertical scrollbar to the edge of the page but there is no scroller (and nothing to scroll) FF and Safari look fine.
Any idea?
This is normal in Internet Explorer, and to my knowledge can not be turned off except maybe with a overflow:hidden on the body or html element, with the obvious downside that the page then can't be scrolled at all.
If you need to get the exact same behaviour in all browsers, and want to add the deactivated scrollbar to FF and Safari, check my recent question.
If you put overflow: auto in the body element and just remove overflow:auto or any other overflow setting in the other elements on the page, then the main browser scrollbar will allow scrolling down the page and the page will expand, moving the footer down as well.