500%) and left margin to -50% of that width minus 100% (i.e. Set width of your full-width div to some multiple of the containing center column div (i.e. Setting overflow property for inner content div (inside containing div) to auto to make content render the height inside the containing div Setting overflow property for main content area (full screen width) to hidden to stop horizontal scroll After giving up on my search I started to get creative and came up with a pretty nice solution so I figured I’d record it here in the hopes of assisting future generations of bewildered developers. Taking the next logical step - I scoured the internet for a blog post explaining how to get around this problem and didn’t find anything. I came across this problem while building a page for this site. FF (at least 13+), IE10+, Chrome and Chrome for Android seem to play nice.So you are writing content into a page that has a defined center column and want to add a horizontal element that goes all the way across the screen width - how do you break outside of the center column content div?.iOS Safari 5+ repaints the clipped content on scroll after scrolling.iOS Safari IE9 does not show the menu under the fold. IE8 shows the menu well, but menu links are not clickable. we cannot set the position of child elements to relative or absolute or use CSS3 transform like scale.ĮDIT: Chrome seems to handle positioning of and CSS3 transforms on child elements a lot better when applying backface-visibility, so just to be sure we added: -webkit-backface-visibility: hidden -moz-backface-visibility: hidden backface-visibility: hidden Īlso note that it's not fully supported by older / mobile browsers or it might take some extra effort.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
June 2023
Categories |