[Bug] Broken in Safari Mobil and Desktop about ct-nextjs-material-kit-pro HOT 9 CLOSED

Hello there, @itportal24 ,

Thank you for your interest in working with our products.
I've searched for the bug, and I believe it comes from the Parallax component. For some reason, when NextJS bundles the styles, it adds the Parallax styles on the Main component as well.
At the moment I honestly do not know what the fix could be other than:

1. Go inside assets/jss/nextjs-material-kit-pro/pages/presentationStyle.js
2. Change the following code:

  main: {
    ...main

To

  main: {
    ...main
    overflow: initial !important;
    height: 100% important;
    background-position: unset !important;

Let me know if this solved your issue.

Best,
Manu

from ct-nextjs-material-kit-pro.

Hi, thanks for the quick reply.

While the components are now displayed in Safari, the header image is now gone on all Browsers/Devices. I don't know if its because the image is missing, but the parallax effect is also gone.

This is the code I applied, because your suggested changes are not exactly valid jss.

 main: {  
    ...main,  
    overflow: "initial !important",  
    height: "100% !important",  
    backgroundPosition: "unset !important"  
  }  

from ct-nextjs-material-kit-pro.

Hello again, @itportal24 ,

What do you mean that the mage is missing?
Did you delete it?

Best,
Manu

from ct-nextjs-material-kit-pro.

I reinstalled from scratch out of the .zip Archive and applied your suggested fix again.
Image is now shown and the components are displayed.

BUT:
On Safari Mobile there is now a grey bar on the top of the site where you can see the background.
Please have a look at the deployment.

I could invite you to the gitlab repo if that helps.

from ct-nextjs-material-kit-pro.

Hello again, @itportal24 ,

I've tested your link on an iPhone Safari and on a Mac Safari.
It seems to me that the image appears on both devices.
Can you please send me a screenshot?

Best,
Manu

from ct-nextjs-material-kit-pro.

Hi,
What I meant was, that the picture is now showing but it is not aligned to the top.
There is a small stripe on top. This is only happening is Safari.
I would suspect its from the parallax, something which is not canceld out by your fix?

from ct-nextjs-material-kit-pro.

Hello again, @itportal24 ,

Really sorry about this, didn't notice it before.
Please go inside assets/jss/nextjs-material-kit-pro/components/parallaxStyle.js and at line 24 add the following code:

,
    marginTop: "0!important"

Let me know if you have further issues.

Best,
Manu

from ct-nextjs-material-kit-pro.

You are not fusing Material-UI and NextJS together the right way.
Have a look at https://github.com/mui-org/material-ui/tree/master/examples/nextjs
Most importantly you are not removing the Serversheets:

// _app.js
componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }

This is why there css-classes which have the same name, but different styles.
Where Firefox/Chrome mostly just use the latest class they see, Safari will default back to User-Agent-Style.

After I changed everything to match the example, everything is working now.

from ct-nextjs-material-kit-pro.

Hey @itportal24 i'm experiencing the same issue, been trying for a week now but couldnt get it fixed.
I tried the SSR as described here https://material-ui.com/de/guides/server-rendering/
But it didnt work.
Could you provide a link with how you exactly solved it?

from ct-nextjs-material-kit-pro.