![]() ![]() ![]() When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. To understand the problem, we need to take a look at the CSS basic box model. The specification says “fit the padding box”. However, the content must still be scrollable programatically, for example using the mechanisms defined in, and the box is therefore still a scroll container. This value indicates that the box’s content is clipped to its padding box and that the UA must not provide any scrolling user interface to view the content outside the clipping region, nor allow scrolling by direct intervention of the user, such as dragging on a touch screen or using the scrolling wheel on a mouse. I then started to read the specification for the hidden value of overflow and there I found the solution: I went on to check the examples on MDN and all of them worked fine in either browser. ![]() I was a little surprised and at first, I thought that it had to be a bug with overflow-x. It seemed to work just fine, but after deploying I noticed that Safari and Chrome on iOS as well as Firefox, rendered the page with horizontal scrolling. And that would be bad.Īfter adding overflow-x: hidden to my transformed element, I started testing in different browsers. To be more precise, in my case the correct property to use was overflow-x with the value of hidden to avoid horizontal scroll, since by using overflow: hidden the main page content, which is (likely) longer than the viewport, would stop scrolling vertically. Usually this would not be an issue that the CSS property overflow couldn’t solve. I was playing around with CSS transforms on an element with a border, where as a result the border would then overflow the page body. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |