Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using the same component in my Gatsby project.

To view the code example, visit: https://codesandbox.io/s/line-splitter-5k1xl?file=/src/App.js

My attempts to resolve the overflow problem include removing global styles to use default font for accurate measurements, utilizing styled components' createGlobalStyle in gatsbyBrowser.js, applying CSS directly in gatsbyBrowser.js and within the component itself, as well as experimenting with inline styles and font declaration within the component.

An interesting observation is that some browsers accurately measure the component only after multiple refreshes. After hours of searching for a solution, I remain unable to fix this issue. Any assistance would be greatly appreciated.

javascriptcssreactjsgatsby

Answer №1

The root of this issue stemmed from the fonts being loaded through Font-Face declaration in CSS. It was discovered that for accurate measurements, fonts must be preloaded. Initially, an attempt was made to add font preload to the page head using Gatsby Helmet plugin like so:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

Although this method seemed theoretically sound, it did not yield the desired results. As a workaround, the "gatsby-plugin-preload-fonts" was implemented and successfully resolved the issue.

For more information on the plugin, visit:

To learn how to utilize the plugin effectively, watch this explanatory video: https://www.youtube.com/watch?v=i2oquvFdzbg

Additionally, it is important to note:

  • Font-face declarations are still being used in the CSS files as usual. For example:

     @font-face { font-family: "Roxborough CF"; src: url("font.ttf") format('truetype'); }

This insight may prove valuable to others facing similar challenges.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Coffeescript Jasmine-Node Tests in Webstorm/Intellij

Using node-jasmine 2 beta4 and writing in Coffeescript, I have successfully set up my tests to run in Intellij 13.1 by configuring the following Run Settings: Node interpreter: /usr/local/bin/node Working Dir: [Project Directory] Javascript File: node_mo ...

javascriptnode.jsintellij-ideacoffeescriptjasmine-node

Obtain the height and width of the original images from the href and assign them to your attributes using jQuery

Hey there pals, I'm currently on a mission to fetch the dimensions (height and width) of an image from a hyperlink and then insert those values into its attribute. This task has got me going bonkers! Here's my snippet: <figure> <a ...

javascripthtmljqueryeachloadimage

Using an AJAX function to retrieve data from two different server-side scripts and populate two separate HTML elements on the page

My goal in this coding situation is to change values in multiple DOM targets. The example from Tizag shows the DOM being altered within the onreadystatechange function, like this: if(ajaxRequest.readyState == 4){ document.myForm.time.value = ajaxRequ ...

javascriptajax

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

javascripthtmlcss

Tips for showing grouped headers in MUIDatatable using React JS

enter image description here Looking at the image above, I am trying to display it in a muidatatable with grouped headers. I attempted to use the code below but was unsuccessful in creating a table with grouped headers; it only displayed the individual h ...

reactjsmaterial-uimui-datatable

chart.js version 3 does not display the correct date data on the time axis

Struggling to make chart.js work with a time axis is proving to be quite challenging for me. The code I have is as follows: <html> <head> <script src="https://cdn.jsdelivr.net/npm/moment"></script> <script src="https://cdnjs.clo ...

javascripthtmlchart.jschart.js3

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

I'm looking to enhance the user experience on my dashboard by allowing users to set their preferred default tab view upon logging in. Using an AJAX call to retrieve the value from the database in MVC, I am working on the JS/Razor side of things to mak ...

jquerycsstwitter-bootstrap

Calculating dimensions for parents and their children

Could someone please explain to me why the size of #child is different from that of #parent? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

htmlbordermargincss

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss

Trying out JSON ld script tag in a HEAD component of a Next.js application

Our project utilizes Next.js for development. We incorporate structured data in JSON-LD format using a script tag within the Next.js layout. Recently, we introduced the inclusion of this JSON-LD script tag conditionally. OurPage.tsx <Head> <tit ...

reactjsnext.jsjestjsreact-testing-library

Why is my image being stretched by flexbox instead of maintaining its aspect ratio?

One interesting aspect of Flexbox is how it handles image resizing. When you resize the width of an image within a flex container, the height does not adjust proportionally. This causes the image to appear stretched. div { display: flex; flex-wrap: ...

htmlcssflexbox

Reorganize containers without relying on bootstrap styling

Is there a method to rearrange the order of two divs without using the bootstrap library? <div class='parent'> <div class='child-1'>Abc..</div> <div class='child-2'>Xyz..</div> </div> I ...

jqueryhtmlcssflexbox

The hover state of a div will not be lost if its parent element is not being hovered over

When hovering over the second, third, or fourth item, hidden text will appear on the left side. If you hover your cursor over the hidden text, it will disappear again. I want to be able to hover over the second item, move my cursor to "hide", and click o ...

javascripthtmlcssvisible

Implementing useReducer in a shopping cart feature, all the while steering clear of using

I am fairly new to React and JS in general, so please forgive the messy code. Currently, I am attempting to create a shopping cart using React hooks useReducer. However, I am concerned that if I add more cases in the future, it may become difficult to hand ...

reactjsreact-hooks

HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it. I found the code for the off-canvas menu on W3Scho ...

javascripthtmlcssoff-canvas-menu

I am constantly reminded by React hooks to include all dependencies

Imagine I am using useEffect to pre-fetch data upon initial rendering: function myComponent(props) { const { fetchSomething } = props; ... ... useEffect(() => { fetchSomething(); }, []); ... ... } My linter is warni ...

javascriptreactjsreact-hooks

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

Verifying the input details of a child form within a step-by-step module

Currently, I am working on a project using React in combination with material-ui. The main task at hand involves utilizing the stepper component to create an effective checkout process for an ecommerce platform: <React.Fragment> {getStepContent(a ...

reactjsmaterial-ui

Unable to create a new collection in Firebase Firestore

I encountered an issue while trying to add a collection in Firebase Firestore using the function .collection(doc).set. Despite finding the new user in authentication in Firebase, the collection was not created and the console displayed an error message. ...

javascriptangularfirebasegoogle-cloud-firestore