I'm rendering the following line in a markdown cell in an IPython notebook (OS 10.8.2, Google Chrome browser):
$$\frac{d}{dx}g(x) = f(x)$$
At the normal zoom level, it looks like this
I'm trying to use this in a webcast and want to apply zoom to the screen
Blockquote
. At the zoom level I want, the fraction rendering gets ugly.
Is there a way to control this?
Does not seem to be an IPython issue, I can reproduce it here :
http://util.io/mathjax
with {\partial \over \partial x}g(x)
Is it just to have the math bigeer or the all page ? You can try to change the zoom factor of equation in mathjax option/right click. Notebook server does not yet expose configuration for that though.
This is a bug in Chrome, but there is a work-around in MathJax v2.1. I suspect you are using an earlier version, so if you update that, it should resolve your problem.
The issue only exists in Google Chrome. It renders properly in Safari:
Related
I'm optimizing the speed of a WordPress website (on mobile only for the moment), with success except for CLS. The CLS became extremely high after optimizing CSS delivery (with WP-Rocket), but I don't see any layout shifts, even when I use Dev Tools (performance test). (on mobile)
Here’s the example : https://trustmyscience.com/israel-a-pratiquement-eradique-la-covid-19/
Results here, with CSS delivery optimization
So it seems to be an invisible layout shift, that Lighthouse perceive as a real layout shift. Lighthouse shows me the problem comes from <div class="entry-content body-color clearfix link-color-wrap progresson">. So, it seems to be related to some "wrapping" of the all article content, that maybe shifts into the background (without being visible), because of some CSS rules maybe ?
Here, the element with the highest layout shift
The element with the highest layout shift (detail)
When I deactivate CSS delivery optimization, CLS go back to almost 0 (but LCP is too high).
Results WITHOUT CSS delivery optimization
I need this CSS delivery optimisation because of LCP importance, but I also now need to solve this issue because of CLS introduction in Core Web Vitals, and need to find what Lighthouse is detecting as a LS. Also, maybe, Lighthouse needs a correction for that ? As it isn't a visible layout shift...
Do you have any idea on how to solve this ? Or do you think I need to reach LS developers to show them this ?
Thank you in advance for your help.
Regards,
The CLS is visible, it's the font.
Don't you notice that when you visit the page, the text gets resized? That's a common cause of CLS.
How to solve?
Serve your fonts locally. Do not use any plug-in like OMGF. Do it manually.
Download the fonts. Choose 2 fonts, one for body, another for headings. You won't need bold, italic, or bold+italic fonts. These will be applied by user's browser.
Convert to woff2 (only woff2 is enough, didn't face any issues)
Upload it to your server
Add font face CSS to declare the fonts
Apply the fonts using CSS elements
Disable Google fonts if you're using any WP theme or builder
Preload the fonts
This will solve the CLS problem, will also reduce the Total Blocking Time.
You might gain a bit in performance by self-hosting the fonts instead of making a call to the Google Fonts API, but fonts are not the main issue here. Javascript is.
There is a lot of Javascript on this website, so the main thread is busy downloading it, parsing it and executing it.
I ran both Lighthouse (with Clear Storage and Simulated throttling enabled) and WebPageTest with a Moto 4G profile.
As you can see from Chrome DevTools and WebPageTest, roughly 56% of the processing time spent on the main thread is due to scripting. Do you really need all of that Javascript?
Here is what I noticed in the Chrome DevTools Performance panel:
There seems to be 5 front-end.js scripts (and 1 min-front.js). Are they duplicates?
Do you need animations with gsap and ScrollTrigger?
Aren't lazyload.min.js and areimagesloaded.js doing the same thing? (I might be wrong)
Are you importing the entire lodash library? If so, try importing just the functions you are actually using.
Do you really need a polyfill for Intersection Observer? I think that all modern browsers support it natively nowadays.
CLS is basically the sum of all unexpected layout shifts that occur on a page. As you can see from the dashed orange line in the chart below, the 4 .woff2 font files contribute to the CLS: the first layout shift occurs as soon as the fonts are fetched.
But as I said, I would focus on removing all unnecessary Javascript. In particular, I would examine third-party JS like the one coming from choices.consentframework.com, which takes 1730ms to load and represents 25% of the content size (see below).
After JavaScript, focus on the images.
The Performance panel in Chrome DevTools shows a lot of requests for images. Are you fetching only the images that are in the viewport, or all the images that are on the page?
Most of these images are WebP and seem already optimized, but there are a few GIFs, which are really bad for performance. It seems that these GIFs are served by https://www.viously.com/ (I guess it's an Ad Server, it's the first time I see it).
Last but not least, double-check that all of your <img> and <video> have size and width attributes set. Images and videos are replaced elements with intrinsic dimensions, and forgetting to set sizes for images in your HTML is a common cause of layout shifts.
See also this article by Addy Osmani for a few more tips on how to optimize CLS.
I want to make an electron app that is similar to scratch in which it uses drag and drop features. I want to make these features using canvas. However, I don't know if this is a good idea as I tried searching it up and never got Electron and HTML5 Canvas in the same sentence.
I'm using canvas for rendering charts in my project and it works correctly. I have been researching a bit and I have not found any better alternative to replace it
I was supplied a logo for a website in .ai format, which I cropped and saved as SVG1.1, and placed this on multiple places on a friend's Shopify store.
Image in question (view this in Safari for iOS)
Screenshot of the image fault on the site: i.stack.imgur.com/HmsIB.png
Link to actual page here: bambooboss.com/pages/about-us
The "Panda Head" image under the first photo is half blacked out when viewed with Safari, latest version of iOS on my iPhone 5. While it looks quite cool, it's definitely not anything like my friend's original creative vision...
I tried another answer here on SO, where they tried surrounding all LinearGradient with <defs> tags, which I did to the current image - but to no avail...
Anyone have a clue what's going on? Is it compatibility? or did something go wrong while saving to SVG from .ai?
Change the following line to:
.st38{opacity:.08;fill:url(#XMLID_108_);}
i.e. remove the 8.00000e-02
also ... run this through an optimiser like SVGOMG ... if displayed at the small size this is far too complicated and large. Simplify all the gradients, maybe even merge them all into one. Should be able to get the ungzipped version down an order of magnitude from 35kb. Lovely logo though.
So, I'm trying to get the hang of using inline Latex in iPython Notebook, and I get a funny rendering of even the simplest of code to just add a subscript:
code in my markdown cell: The slope $J_1$
renders like this:
I notice that when I first open the notebook, as the page is loading, the subscript displays properly (no vertical bar) but only briefly, but when the page is fully loaded, the rendered result changes and shows the vertical bar. The font appears to change in that process as well.
I've also downloaded other people's notebooks that use inline Latex, which look fine when viewed with the Jupyter nbViewer online;
(for example, http://nbviewer.jupyter.org/github/rszeto/umich-eecs545-lectures/blob/master/lecture02_linear-algebra-optimization/Lecture%202%20-%20Linear%20Algebra%20and%20Optimization.ipynb renders fine, but if I download the notebook and look at it with my local Jupyter viewer, I see the same vertical bar thing happening for subscripts in the Latex bits of the notebook)
I'm running iPython ver 4.0.1, viewing the notebook using Chrome (Version 48.0.2564.109 m) running on Win 7.
Is there a fix to render things properly? I don't see the vertical bar problem when I open the notebook using Internet Explorer.
this is my first battle with 'correcting' display issues with CSS in IE8/9. Looks fine in Chrome/FF. Slowly making my way through the form but stuck at this spot.
This has been a funky challenge so far as there have been spots I have had to use margin where I would normally use pattern, so on so on. The app is in RoR 3.0.7, Mac OS X Lion.
Using Virtual Box and had to download the IE 8/9 stuff. Kinda sucks bc I can't maximize the screen. Anyways.
I've tried padding and margin values of zero, negatives, positives, widths. I CANNOT get these damn things on the same line, let alone change their widths whatsoever!
Any ideas are greatly appreciated! Thanks
Try position:relative, reset margin and padding, try left:10px, also display:block;. Add width: and height too. Should work than.
Got it...I'm an idiot, or a noob, or both. I didn't have a container for all the words. Swear I tried it last night but didn't work. Just made a container and set the width and good to go!