I'm trying to implement image lazy loading for a side project using intersection observer API , the problem that i'm facing is that no matter how i'm adjusting the rootMargin for the x-axis (e.g '0px 300px 0px 0px) , the intersection seems to only happen on the viewport .
Expected: Image to be loaded when intersecting 300px away before entering the viewport .
Result: Image only loads when intersecting at viewport , which rootMargin seems to not be working on horizontal level.
Here is an example:
```https://codepen.io/daniel-yeh/pen/WNEzJWe?editors=1111```
Really hope that someone could help with this one , have absolutely no idea....
Had the same issue and this solution worked for me: https://stackoverflow.com/a/58625634/18598778
Basically you have to specify the root element to be a direct ancestor of the target.
Related
I have a graph rendered as SVG by Angular in a web page. The size of the SVG is dynamic, with its width being 100% of its container. I'd like to be able to scroll (and eventually zoom) the SVG's viewport. I'm not talking about the browser scrolling, but rather manually implemented scrolling by dragging on the background of the SVG.
I know I can use viewBox to do this, and changing the first two numbers works well, but the problem is that the second two numbers need to match the CSS width and height to be at 100% zoom. How do I work around this? Do I constantly need to update viewBox in response to the container size changing (e.g. when the browser window changes size) so it matches the CSS size?
There are many similar questions on here, but none that I can see are about this specific issue.
Update: I think I solved the first part of the problem using:
<svg #svg attr.viewBox="{{-scrollX}} {{-scrollY}} {{svg.clientWidth}} {{svg.clientHeight}}">
But I'm a little suspicious of its efficiency.
I still need to figure out how MouseEvent coordinates interact with this to be able to update my scrollX and scrollY, as well as how to make the SVG grow bigger as it needs to (but not bigger on the screen).
I have many small icons in my website. Instead of loading all of them independently, I am thinking of using CSS sprites due to performance gain.
Consider the following code
<div style="width: 24px; height: 24px;background: url('img.png') -10px -10px;"></div>
vs
<img src="css-sprites.png" style="width: 24px;height: 24px;">
As expected, both gives same result. When loading as an image (second case), if I keep resolution of actual image a higher value, say 128*128, and using 24*24 for display, I am getting better resolution even when we zoom the page in browser (tested in mozilla).
But when using css sprites, since I have to keep the same display resolution in the sprite, the image gets blurred when zooming.
Is this expected behavior or am i doing something wrong? Is there any way to overcome this issue when using css sprites?
I do not have much experience with html and first time going to use css sprites. Please help.
Edit: also, many posts I could see in internet about cross-browser issues while zooming. Is this some point of concern even now?
If your sprite size is 200x200 px, and you want to get better resolution by zooming - make you background-size: 100px 100px;. So if you will zoom to 200% - the quality of you image will still be good. Obviously, your sprite image should be twice bigger the size you are going to use on your website. To avoid problems - do not mix % and px or any other different units in one background-size. Use only px in your case and everything will work just fine.
Summarizing. Make sprite twice bigger, set background-size twice smaller the size of sprite image. Tested it in Chrome and FF. Works fine on zooming.
If you are familiar with svg files - try to do your own vector font (for icons) using http://fontastic.me/. No scaling issues will disturb you. You can set size by font-size and make them any color by color in CSS, like a text.
I have a ViewController that has content in the top third and then a UIContainerView in the bottom two thirds of the view. The UIContainerView allows the user to rotate between three childViewControllers. Using AutoLayout, I have constrained the UIContainerView to the sides of the screen (widthAnchor), the bottom of the screen (bottomAnchor) and two thirds of the way up the screen (topAnchor).
In laying out content in the first childViewController, which appears on the initial load of the parent ViewController, I ran into difficulty. It appears that on that initial load, the childViewController view is given a view.frame.height equal to the height of the device. I set up my constraints to deal with that and the first screen displays fine.
The issue I am running into now is that when I rotate through the childViewControllers, the view.frame.height is set to the height of the ContainerView (which I would have suspected to be the case from the start). This causes the constraints in the first childViewController to "break".
Look at this behavior below.
Image #1: Initial load of the ParentViewController.
https://roryent.box.com/s/xhil4wk0ga5qoddhko5jxj3a1r4103h3
Image #2: Switching the childViewController.
https://roryent.box.com/s/9f2jj0l1waui3ekyplq4eae51m6wrqn5
Image #3: Coming back to the initial childViewController. The constraints "work" but are reacting to a different view.frame.height.
https://roryent.box.com/s/cj9ffyy3m9oh8f523l2vsdezo1frk12x
NOTE: I am creating the constraints in the ChildViewController class and trying to use the frame of that childViewController frame to do so.
I have attempted to move the methods for constraining the items into willLayoutSubviews() in the childViewController with no change.
I suspect that there is something wrong with where I am loading the different items.
I would expect the self.view.frame.height used in the childViewController code reflect the height of the UIContainerView that is displaying it. In my case the height should be .67 * UIScreen.Main.Bounds.Height.
I believe the issue was due to my implementation of the ContainerView and its corresponding childViewControllers.
I have rebuilt the feature following this tutorial and have not had any problems. https://cocoacasts.com/managing-view-controllers-with-container-view-controllers/
This one is a rather weird question, but please help me to find at least a solution or a possibility.
On our website we have some sort of round button with a centered "+", which opens a set of other buttons to the bottom when clicked on.
These popped up buttons only have icons as centered content, each fitting to 24px width and height. For centering we use the method with left: 50% and top:50% as well as transform:translate(-12px,-12px) - the usual centering apart from flexbox methods.
On all our tests these icons where fairly centered (of course there is always some pixel differences with crossbrowser and crossdevice).
Now the last problem remaining is, that on Lenovo ThinkPads (browser of choice) the icons are far off the position they should be; like 5 to 6 pixels to the left or bottom. We could not figure out how we can fix this problem to this day.
On any other device, let it be a Laptop or a PC stationary with the same installed Windows and browsers, it is displaying as intended.
My question now: Does anyone have an idea WHY the Lenovo ThinkPads are displaying these icons differently? Is there something Lenovo ThinkPads are rendering differently or is it the DPI or something else we are just unaware of?
Many thanks for your possible answers.
You should check the device pixel ratio
of your device, There are some cases when it causes a problem even if you use translate and proper pixels.
This website can help you get the details.
Target them using media queries and variable pixel ratios:
#media only screen and (min-device-pixel-ratio: 2) {
/* your code */
}
Hello all interested people,
We've discovered the issue in the font-family: "Material Icons". This CSS adds unnatural behaviour on Lenovo ThinkPads, adding weird whitespace on the right side of some icons.
Thank you for your suggestions and help :) Much appreciated.
I have a s:Group with few fixed size components in it, these are lets suppose 200x300, 300x150 etc
Now if i resize s:Group with resizeMode=Scale, (scale down). and try to read the scaled down size of these child components but they still has the same old height and width.
how can i get width and height after scaling down the parent group?
Thanks
Try myComponent.transform.pixelBounds.width. That should give you an actual measured width wrt the visible X-Axis. If you are rotating, but you want the scale along X-Axis wrt the component, see this post on obtaining the scaling of an object.
Hey there :]
At first i thought it would be an easy task to get the width and height. But when i tried it, none of explicitWidth and measuredWidth worked, when resizeMode is set to "scale" of the s:Group.
So i found a way but i'm not sure if it's the best solution:
write this in your script tag:
import mx.core.mx_internal;
use namespace mx_internal;
then if you have
Group id="group" resizeMode="scale"
and a s:Button id="myButton" inside it
in order to get the myButton width for example, just compute group.$scaleX * myButton.width
Hope this will work.
all the best,
blz