Tinted screenshot showing where the p-tag firstline does not flow properly when its font size is increased as part of a pseudo-class ruleset

Issue with CSS pseudo class typography

Another annoying issue I don’t understand. I keep playing with pseudo classes. e.g. currently:

.entry-content p.first-paragraph::first-line
{
  font-size:1.1em;
  font-weight: bold;
  padding-right: 0; /* did try 1em but that upsets firefox */
}

.entry-content p:not(.pseudo-ignore)::first-letter
{
  font-size:1.1em;
  font-weight:bold;
  font-family: Georgia;
}

.entry-content p:first-child:not(.pseudo-ignore)::first-letter
{
  color: #00C853;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  text-shadow: 2px 2px #ff0000;
}

The problem is that the increase in font size due to CSS3 pseudo classes doesn’t seem to force word-wrapping / reflow on my site. I don’t know if there’s something else on my site that stops it from happening.

In anger, I’ve set-up JQuery in my Header (Header and Footer plug-in) to forcibly jiggle the relevant elements to prompt the CSS to resettle. (Probably only 2 or 3 lines are actively relevant, but experimenting/testing would mean checking a number of devices / viewports so happy now as-is unless I suspect it impacts something else).

    // trying to hide a CSS first-line sizing issue ... words don't reflow after resizing without resize event
    $(".entry-content").width($(".entry-content").width()-1);
    window.dispatchEvent(new Event("resize"));
    $(".entry-content").width($(".entry-content").width()+1);
    window.dispatchEvent(new Event("resize"));
    $(".entry-content").css("width", "auto");
    $(".entry-content").resize();

Maybe the animations I use in my site-header image, which are quite computationally heavy for older CPUs, interfere with the pseudo-class generators?

/* DAVE: mis-placed original source reference - check bookmarks */
/* this is the jittery effect I use for the site header image */
.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: repeating-linear-gradient( 0deg, rgba(255, 0, 0, .2), transparent 2px, rgba(255, 0, 0, .5) 10px, transparent 10px );
  opacity: .25;
  filter: blur(1px) contrast(110%) brighness(5) saturation(8);
  animation: jitter 5s ease-in-out infinite;
  animation-delay: 2s;
  transform-origin: center center;
}

.screen:before {
  content: '';
  width: 100%;
  height: 100%;
  top: -5px;
  left: -5px;
  position: absolute;
  background: repeating-linear-gradient( 0deg, rgba(0, 0, 255, .2), transparent 2px, rgba(0, 255, 0, .5) 10px, transparent 10px );
  filter: brighness(10) saturation(10);
  animation: jitter 3s ease-in-out infinite;
  animation-delay: 1s;
  transform-origin: center center;
}

.screen:after {
  content: '';
  width: 100%;
  height: 100%;
  top: -2px;
  left: -2px;
  position: absolute;
  animation: jitter 2s ease-in-out infinite;
  background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, .2), transparent 2px, rgba(255, 255, 255, .5) 10px, transparent 10px );
  transform-origin: center center;
}

@keyframes jitter {
  0% {
    margin-top: 10px;
    margin-left: 5px;
  }

  20% {
    margin-top: -10px;
    margin-left: -5px;
  }

  25% {
    margin-top: 2px;
    margin-left: 3px;
  }

  26% {
    margin-top: 4px;
    margin-left: -1px;
  }

  27% {
    margin-top: 0px;
    margin-left: 0px;
  }

  30% {
    margin-top: 10px;
    margin-left: 5px;
  }

  50% {
    margin-top: -1px;
    margin-left: 1px;
  }

  61% {
    margin-top: 1px;
    margin-left: -1px;
  }

  63% {
    margin-top: -30px;
    left: -70%;
    transform: skewX(-10deg);
    width: 250%;
    height: 250%;
  }

  67% {
    margin-top: -10px;
    margin-left: -15px;
  }

  69% {
    margin-top: 5px;
    margin-left: 5px;
  }

  70% {
    top: -100px;
    margin-left: 5px;
    transform: skewY(10deg);
    width: 250%;
    height: 250%;
  }

  80% {
  }

  81% {
    margin-top: 0px;
    margin-left: 0px;
  }

  100% {
    margin-top: 10px;
    margin-left: 5px;
  }
}

Update: 1st July 2017

Oops… this line (twice):

window.dispatchEvent(new Event('resize'));

Kills my site on Internet Explorer 11 (I’m not really supporting below that … too much trouble and limitations). Will see if things are ok without those lines.