www.miekemosmuller.com - Text overflows the viewport

[ghost]

URL: https://www.miekemosmuller.com/nl/blog/ernst-en-spel

Browser / Version: Firefox Mobile 68.0
Operating System: Android 8.0.0
Tested Another Browser: Yes

Problem type: Desktop site instead of mobile site
Description: text to big for screen
Steps to Reproduce:
Text can't read end of every sentence right side
Screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20200125223657
• channel: beta
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-sergiulogigan]

Thanks for the report!
I'm able to reproduce the issue.

Tested with:
Browser / Version: Firefox Preview Nightly 200203 (🦎: 74.0a1-20200129093157)
Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Moving to Needsdiagnosis.

[karlcow]

to note that the text takes the normal size once it has been scrolled.

This is related to

.CONTENT {
	position: relative;
	display: grid;
	display: -ms-grid;
	max-width: 100%;
	margin: 0 25px;
	text-align: justify;
	line-height: 18pt;
}

When the image is out of view this is the markup.

<p>
	<img class="LZY" alt="Mieke Mosmuller" data-src="https://www.miekemosmuller.com/dimages/Blog297.jpg">
</p>

This is controlled by
https://www.miekemosmuller.com/WEB/js/sysProc_NL.js

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;
  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll("*[data-src]");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.removeAttribute("data-src");
          image.classList.remove("LZY");
          imageObserver.unobserve(image);
        }
      });
    });
    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
    lazyloadElements = document.querySelectorAll("*[data-bgsrc]");
    var backgroundObserver = new IntersectionObserver(function(
      entries,
      observer
    ) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var element = entry.target;
          element.style.backgroundImage = "url(" + element.dataset.bgsrc + ")";
          element.removeAttribute("data-bgsrc");
          backgroundObserver.unobserve(element);
        }
      });
    });
    lazyloadElements.forEach(function(element) {
      backgroundObserver.observe(element);
    });
  } else {
    lazyload();
    window.addEventListener("load", lazyload);
    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
    lazyloadBg();
    window.addEventListener("load", lazyloadBg);
    document.addEventListener("scroll", lazyloadBg);
    window.addEventListener("resize", lazyloadBg);
    window.addEventListener("orientationChange", lazyloadBg);
  }
});

specifically here

        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.removeAttribute("data-src");
          image.classList.remove("LZY");
          imageObserver.unobserve(image);
        }

At this specific moment

```css
.LZY {
	background: #F1F1FA;
	width: 400px;
	height: 300px;
	display: block;
	margin: 10px auto;
	border: 0;
}
img[data-src] {
	opacity: 0;
}
.CONTENT img, aside img {
	max-width: 100%;
}

The text gets the right size when image.src = image.dataset.src;
The computed value of the width becomes 381px instead of 400px.

That's an interesting issue.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1613576

[dholbert]

As noted on https://bugzilla.mozilla.org/show_bug.cgi?id=1613576 , this issue is reproducible in other browsers as well, so it's not a web-compatibility bug or a Firefox specific bug. It's just a bug in this website which is visible in Chrome on Android as well (due to a difference in behavior between how percent max-width values influence the intrinsic sizing behavior of replaced elements vs. blocks).