Stretched Background Safari

  • So I’ve been experiencing a strange “jumpy” layout in Safari for sections that have a stretched width. I’ve tested with the theme I’m working on as well as Twenty Sixteen and it certainly seems like their is an issue. Wondering if you have a quick fix you can push out because I think a safari bandaid is needed in your javascript. To create add a stretched background to a section and resize your window in Safari.

    Outstanding plugin and code though. Super cool. Love working with it. 5 Stars!

    • This topic was modified 7 years, 6 months ago by bluoma.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter bluoma

    (@bluoma)

    So… my quick solution was to turn of the stretched background in the section’s general settings and whip up my own js:

    
var element = $('.your_section');
        var offset = element.parent().offset();

        function fullwidth(el) {
          el.each(function(){
            $(this).css({
                'width': '100vw',
  	            'margin-left': '-' + offset.left + 'px',
  	        });
          });
        } 

        if (element.length >= 1) {
          fullwidth(element);

	        $(window).resize(function() {
	            offset = element.parent().offset();
	            fullwidth(element);
	        });
	}
    Plugin Author Andrew Worsfold

    (@andrewworsfold)

    Thanks for that, @bluoma.

    I’d recommend CSS over JS solutions every time for full width sections, although what you have above looks good too. I’ll look to release a more robust version for people that need it and don’t have the necessary JS knowledge.

    Cheers,
    Andrew.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Stretched Background Safari’ is closed to new replies.