I have used the Views Slideshow module on many D8 sites, but have never come across this particular quirk before. On this site, the slideshow view in the front page splash screen briefly renders at the correct size but then instantly resizes (each individual <img>) to 0x0 shortly after page load (indicating to me that it is likely caused by a JS script somewhere in the module.)
I have dived into the various module folders but so far have been unable to put my finger on where this behavior is coming from. My suspicion is that it could be related to the fact that the Slideshow is located in one pane of a flexible CSS Grid, since I know Slideshow does something on page load akin to calculating the rendered size of each image as it would appear on screen, and that could mess it up. Another slideshow is located lower on the same page outside that grid and is working exactly as expected.
Any help investigating this strange disappearing behavior would be much appreciated!
When views slideshow runs it's javascript, it needs the containing div to have some sizes set.
Try adding this so the sideshow takes on the size of the containing div (which is the grid item):
.block-views-blockslideshow-header-block-1 {
width: 100%;
height: 100%;
top: 0px;
position: relative;
overflow: hidden;
}
Related
I looked at the new CSS property content-visibility available on Google Chrome 85, and added it to my stylesheets to improve the rendering performance on my site:
.my-page-section {
content-visibility: auto;
}
The problem is with the scrollbar. When I drag the scrollbar from top to the bottom, it kind of "lags": the cursor reaches the bottom of the screen, but the scrollbar still is not at the bottom of the page. To get to the bottom of the page, I need to release the mouse, move it up, and drag the scrollbar down several times.
Reading the article linked above, I saw the contain-intrinsic-size CSS property. Adding it with a reasonable value reduces the problem with the scrollbar, but it still happens. I think it is because my app generates dynamic content and no HTML div with the class "my-page-section" will have the same size:
.my-page-section {
content-visibility: auto;
contain-intrinsic-size: 250px;
}
My question is: how can I improve my page rendering performance with the content-visibility property, without getting in the way of our users that prefer to drag the scrollbar over using the mouse wheel?
You should mock up candidates for a design solution. A consequence of dynamic height is a variable scroll height.
Re-design pages to group content categories in columns with tiles of
a fixed size.
Parse content after page load to set an accurate contain-intrinsic-size. This may not save 25ms on the first paint, but for the total session it may save time.
Explore better applications for this user-level setting: apps using off-screen canvas, onion-skin type apps, scrollbar-agnostic touchscreens.
Petition the W3C and browser vendors to resolve this matter appropriately.
On one of my sites, while the page loads images appear much bigger than they are supposed to (as specified in the CSS)
I was thinking that it might be something related to the size of the images, but no.
I tried changing the 'display' property but that did not help either. I'm thinking that perhaps it's some JS related resizing issue, but I don't really know how to test for it. The blocks are powered by OWL-Carousel, but I tried searching for such an issue and came up empty handed.
** Thanks for the answer - which was given by Benjamin. The issue was caused by FOUC, Above the fold rendering of the elements. Once I added the "critical CSS" (that loads before OWL carousel actually does), the issue dissepated.
What you're dealing with is something akin to what's known as FOUC (Flash of Unstyled Content) - though the cause for you appears to be related to your "owl carousel" which takes a moment to initialize, and your site relies on that for the actual final appearance.
You don't have any CSS that gets the layout close enough before the Owl Carousel loads in. If you applied something like the following CSS to it, it would get it pretty close (at least on desktop, I didn't check the actual appearance before/after on mobile, but that could be amended with an #media query)
.scolumns {
display: flex;
overflow-x: hidden;
}
.scolumns > .column {
width: 248px;
flex-shrink: 0;
padding: 10px;
}
Basically, if you rely on JavaScript based DOM manipulation for your final layout, you'll either want to apply some CSS that gets it close first (and doesn't affect the final layout, hence the Direct Child Combinator above: > - your carousel adds containers, so it won't affect it after it's done loading") - or use some kind of loading animation on the parent element that you hide when it's fully loaded.
I'm simply trying to emulate one of these methods for stickying a video that will play as a viewer reads a blog post on my Squarespace site.
https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
How to make div fixed after you scroll to that div?
http://js fiddle.net/4mqLhnpf/
Preferably the video would lock to the top portion of the screen, allowing the article to be scrolled below it.
I've tried all methods listed above and none have worked. I've copied the code directly, and even changed IDs and classes in case something was overlapping and causing an error. Nothing works. Is this sort of functionality not allowed by Squarespace inherently or am I doing something wrong here?
You can try the CSS position property.
Simply add this to the div styling:
position: sticky;
position: -webkit-sticky;
top: 0;
So this is an "issue" that I've been experiencing for a new website that I've been building.
It utilizes WP Bakery's Visual Composer Row widget, and occurs when the CSS/JS kicks in to expand the header row from default to stretch.
Because the header row has a background colour, the initial header looks like this. However, when the CSS/JS kicks in to expand the row, it then "flickers" and looks like this.
This obviously looks very unprofessional, and was wondering can suggest anything that I could try.
Would appreciate any assistance.
Thanks!
This is similar to other FOUCs (Flash of Unstyled Content). You have a few options.
One is to add the stretch attributes to the element in question specifically. Basically take: .stretch { width: 100%; margin: 0 auto /* … whatever */ } and apply those styles to your element, ideally by ID: #my-header { width: 100%; margin: 0 auto /* … whatever */ } and put them in your header so they're loaded right away, perhaps in your Customizer.
Another option is to find another way to add the stretch class to that element manually. I'm not familiar enough with VC to give examples (though, to be honest the few sites I've made that use it haven't seemed to have this issue?). The benefit of this would be that you don't need to duplicate CSS attributes, and don't need to wait to JS to apply the class, which probably isn't happening until the entire footer is loaded.
Another option is the all-too common (and arguably unnecessary/annoying) "full page loader". This is the option I'd avoid if I were you, but you can plop in a full screen white page with your logo and a spinner that goes away when the entire markup is loaded or when all resources are fetched. This delays users accessing your site, and most users would prefer to see a FOUC than a loading screen, based on my limited testing.
First post. Preface - Recently started web developing so don't have much experience with IE7.
Created a webpage using Adobe Muse for the first time because it's supposed to be fast for the design side. Design was fast but having some weird issues displaying the page in IE7. A div always jumps to the very top of the page whether the positioning is absolute or relative. Not sure what is going on. The page is found at
http://dealer.dealers2farmers.com/dealers/cherokeegarage/
There is a horizontal div that contains the "Search Inventory" and Google map that always jumps to the top of the page in IE7.
This is the CSS of the div
#horzBannerPosition
{
z-index: 2;
width: 0.01px;
top: -3px;
margin-bottom: -3px;
position: relative;
}
I thought the width was strange, Adobe Muse wrote most of this but it seems to work just fine with newer browsers. Not sure why this jumps to the top of the page in IE7. Any ideas?
Ok with just a quick glance over, looks like you have a conflict with your z-indexing, your positioning, as well as using top. Remember for IE7, z-indexing actually starts at 0 and gets all messy from there (this may help: http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7). Also careful with using classes and id's in the same tag. I would have to dedicate more time to this to check it out in full, but check out that article for the time being.