divs are invisible/transparent

  • Resolved acmdesigns

    (@acmdesigns)


    1 year, 6 months ago

    I created the masonry shortcode, inserted it into the template file, but when I loaded the page, it was blank. All the HTML seems to be there and consuming space on the page, but after further inspection, it looks like the opacity CSS is set to 0 on the .sm-grid .grid-sm-boxes-in selector. Disabling the opacity property in chrome dev tools shows the content properly, but I assume there’s some JS or other code that’s supposed to automatically set the opacity to 1 on some other trigger. I’m just starting to dig into the plugin code deeper but I was hoping you could assist. Maybe I’m missing something in the configuration or template.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter acmdesigns

    (@acmdesigns)

    After some investigation, I found that the JS code on line 108 of AnimOnScroll.js is never run: if( inViewport( el ) ) { ... } Looking at that function, it checks if the element is in view, and if so, it adds the .shown class to the div which turns the opacity to 1.

    I noticed that it’s because the check for Modernizr.cssanimations returns undefined for some reason. I have no idea why, as this would be browser specific and I’m using Chrome v116 (I’m going to test updating to the latest CHrome, but I don’t think it’ll help)

    I double checked and Modernizr is correctly loaded — Modernizr.csstransitions is true, so I’m really not sure what to make of this.

    Thread Starter acmdesigns

    (@acmdesigns)

    I figured it out, the theme I’m using also has Modernizr loaded, but with only https://modernizr.com/download/#-csstransforms3d-csstransitions-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes and cssanimations isn’t included so it overwrites the loaded instance of Modernizr from Simple Masonry Layout ??

    Is there a good way to override modernizr in wordpress so only 1 combined modernizr is used.

    Plugin Author Tako

    (@razzu)

    Hello,

    Either dequeue theme’s modenizr or load theme’s modenizr to only required page.

    Hope this helps.. Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘divs are invisible/transparent’ is closed to new replies.