Pseudo open/close quote marks mess up on browser resize (slideshow)

[grimski]

Hi there,

I have a slideshow (flexslider) which is used to display a few testimonials. This works great on the face of it. If you scale the browser window down the quote marks behave as you’d expect (and hope). However, when you increase the width of the browser window again duplicate quote marks are displayed and repeated.

As there’s a lot of javascript/custom fonts I thought I’d link to the test page first:

http://www.moymadethis.com/slideshow/index.html

It might take a bit of time but I can create a CodePen I guess. Just hoping for a bit of a quick win on this if anyone has an idea.

Cheers in advance!

[Paulie_D]

Seems to work fine for me in Chrome 51

[grimski]

Hmmm I’m on Chrome 50 (Mac) and when I resize the browser window up and down it glitches. No option to update, say’s I am.

Seems ok in Firefox and Safari but I get the same issue in Opera.

Doesn’t look like it’s an issue scaling the browser down, just up?

[bearhead]

Yeah it seems pretty weird to me… I wonder if giving blockquote > p:after and blockquote > p:before completely separate styles might fix the problem… the issue sort of seems like its because of some strange conflict between the styles for blockquote > p:after:

blockquote > p:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
margin: 5px 0 0 5px;
position: absolute;
top: auto;
}

and

blockquote > p:before, blockquote > p:after {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;

edit:
Not sure what the issue is exactly, but adding overflow:hidden to
blockquote > p:before, blockquote > p:after seems to fix the problem in chrome.

[grimski]

Weird @bearhead, so do you meant essentially you have exactly the same styles but rather than separating blockquote > p:before and blockquote > p:after with a comma? So…

&:before {
    background: url(../img/content/quote-open.png) no-repeat 0 0;
    content: "";
    display: inline-block;
    height: 24px;
    margin: 0 10px 0 -30px;
    position: relative;
    top: -5px;
    width: 21px;
}

&:after {
    background: url(../img/content/quote-close.png) no-repeat 0 0;
    content: "";
    display: inline-block;
    height: 24px;
    margin: 0 10px 0 -30px;
    position: relative;
    top: -5px;
    width: 21px;
}

Instead of;

&:before,
&:after {
    background: url(../img/content/quote-open.png) no-repeat 0 0;
    content: "";
    display: inline-block;
    height: 24px;
    margin: 0 10px 0 -30px;
    position: relative;
    top: -5px;
    width: 21px;
}

&:after {
    background: url(../img/content/quote-close.png) no-repeat 0 0;
    margin: 5px 0 0 5px;
    position: absolute;
    top: auto;
}

I think you’re right, actually adding overflow: hidden; to the <blockquote> element seems to work as well.

[bearhead]

Yeah maybe… oddly, when I’m looking at it with the dev tools, the problem goes away if I toggle the background declaration for the blockquote > p:before, blockquote > p:after { selector, off then on again.

That led me to think that there was maybe some conflict with the selectors? but I’m not sure…

[grimski]

I’ve had a couple of strange glitches before with before/after classes – oddly enough from memory a few with blockquotes too!

I’ve also had some problems that have been fixed by opening dev tools, almost like it kicks it and resets everything.

Adding blockquote {overflow: hidden;} seems to do the trick. I wonder if it’s something to do with the ‘cloned’ list-items in flexslider.

I’ve updated the CSS on the link I provided, seems ok!

http://www.moymadethis.com/slideshow/

[Author]

Posts