I am trying to improve my Magento website speed. In Mobile view, I am getting below issue in Google Pagespeed.
Avoid large layout shifts 5 elements found in mobile view. 4 elements from an iframe. And another one is normal text. I am wondering why it's showing for normal text. I have added font-display: swap. If I checked with the image also showing the CLS issue. This content is above the fold section in the mobile view.
How to resolve this?
For CLS fix : you should identify on whats the element responsible, make sure that there is a dummy image or an element of that size.
Bread crumbs on times are known as one of the elements of layout shift.
Images too can be the reason.
Share site URL to check further.
Related
This is perhaps a more general question as I'm looking for ideas on how to approach a problem working with PDFView/PDFKit. I have a small sample application that allows you to display a page, select a range of text and then associate a comment with that text. Once the comment is saved the comment is displayed on the PDFView page in the margin via an overridden draw() function for PDFView.
Problem is that with very small margins the comments can be very squished. I've been looking for a straight-forward solution and would very much appreciate ideas on how to address it.
The obvious (ie, easy) solution is to change the actual "page size" in the PDFView and have wider margins, but of course PDFKit has no support for that (I don't think). Another thought was to go to a custom PDFView library but the only ones I found when I last looked were iOS (not Cocoa) based.
Last idea was to instead of drawing directly on the page have some sort of pop-up window (like a sticky-note) contain the note but then it would need to be moved dynamically with the scrolling of the page. And of course one other was to recreate the PDF dynamically for viewing and make all the pages larger... but I've not dug into how much of a performance hit / effort that would entail.
Maybe there's a simple/obvious solution that I've missed?
I created a simple sample app in gitHub which shows the basic functionality for people to play with if that's of help. https://github.com/jcnolan/PDFMarginTextView
I have lots of images on lots of pages that are all page-anchored. I want to insert a page before them all. But inserting a regular page break doesn't do it. It just bumps up the text, not the page-anchored images. Is this possible?
In most cases, it's not recommended to anchor images to the page. Instead, anchor to a paragraph and then position the image on the page.
Page-anchored images are fixed to a particular page, or you may think of it as a particular page number and the numbering does not change. This behavior has been reported as a bug. However, according to Mike Kaganski (a LO developer), it is not a bug but is intended behavior.
Similar questions are on ask.libreoffice.org, all with the same conclusion:
https://ask.libreoffice.org/en/question/201131/anchor-to-page/
https://ask.libreoffice.org/en/question/65057/photos-and-anchor-to-page/
On a computer you can easily tab through HTML checkboxes on a website, but is there any way to make it so that on an iPhone when you hit the 'next' button it goes to a checkbox? I've noticed it'll go between text boxes and drop down menus, but it won't do it for checkboxes or clickable buttons. Is this an issue with the iPhone, or is it something I can change on my website?
Can you please be a bit more precise with your question. And if its the size of the checkbox that is a concern which makes it non tappable, then as suggested by the user interface guide of apple ios, please make the size as 44x44 to make it tappable. Well thats just a suggestible size and I believe a 25x25 size may solve your issue.
I have a mobile site which I'm testing on the iPhone, and unlike most other sites, I'm not able to hold my finger on the screen to get the 'copy' menu to appear (with the draggable handles to select an area to copy). Nothing happens at all on my site.
I've tried adding the following to my style sheet but it hasn't made any difference:
-webkit-user-select: text;
I should also state that I have the following also in my style sheet and within the page head:
-webkit-text-size-adjust: none;
I've got these as I didn't want the content to be scalable, and just wanted the content to span 100% of the device width.
Would the implementation of any of the above be causing the lack of selectable text on the site? Out of interest, I tried the flickr mobile website which also is not scalable and uses 100% of the device width like my site, and that also doesn't seem to come up with the draggable/select area for copying when you hold your finger on some text.
Does anyone have any idea why this is or how I can make the text content (or any content actually) selectable for copying/pasting?
Thanks
are there any elements that may be obscuring the items by overlaying them, etc? a z-indexing issue, perhaps?
I'm an iPhone developer, but new to web development. I've done some basic HTML websites and made one in iWeb as well. I'm trying to branch out to mobile web development now, so I checked out Dashcode.
Anyway, I'm trying to put a Call Button, Mail Button, and Map Button in horizontal alignment. I realize that I can add a Column Layout and have two buttons in a row, but that's the most I've gotten.
Any ideas? Thanks!
Thomas
Edit: I still haven't figured this out yet. I was given advice about a fixed position button bar, but I am not sure how to implement it. I've been looking at code, but haven't gotten it yet. Still trying though. Any help is appreciated!
What i do usually is to select the element you can't align horizontally and then go to the inspector -> dimension tab and in disposition you select fixed absolute.
This should work but beware because if you've the intention to change element's place dynamically you may have some surprise...
I think you are looking for something like this.
A fixed position button bar is created with several buttons side by side.
/Mogens