Showing questions tagged: Show all questions
  • Archived

Why my code work fine on chrome but not firefox?

Here is my code: <html> <head> <meta charset="utf-8"> <style> .fullCard, .lowerHalfCard, .upperHalfCard, .fullCard-after, .lo… (read more)

Here is my code:

<html>
 <head>
  <meta charset="utf-8">
  <style>
   .fullCard,
   .lowerHalfCard,
   .upperHalfCard,
   .fullCard-after,
   .lowerHalfCard-after,
   .upperHalfCard-after {
     background-color: inherit;
     border-radius: 10px;
     height: 100%;
     width: 100%;
     position: absolute;
     
     align-items: center;
     display: flex;
     justify-content: center;
     vertical-align:middle;
   }
  
   .fullCard-after::after,
   .upperHalfCard-after::after{
     content: "";
     display: block;
     position: absolute;
     height: 4px;
     background-color: inherit;
     width: 100%;
     top: calc(50% - 2px);
   }
   .lowerHalfCard-after::after{
     content: "";
     display: block;
     position: absolute;
     height: 4px;
     background-color: inherit;
     width: 100%;
     top: calc(50% - 2px);
   }
   .lowerHalfCard,
   .lowerHalfCard-after{
    clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
   }
   .upperHalfCard,
   .upperHalfCard-after{
     clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
   }

   .splitFlap {
     background-color:black;
     box-sizing: border-box;
     border-radius: 10px;    
     width: 100px;
     height: 150px;
     position: relative;    
   }

   .rotate0to90 {
     animation-name: r0to90;
   }

   .rotate90to0 {
     animation-name: r90to0;
   }

   .rotate0to_90 {
     animation-name: r0to_90;
   }

   .rotate_90to0 {
     animation-name: r_90to0;
   }

   .rotate0to90,
   .rotate90to0,
   .rotate0to_90,
   .rotate_90to0 {
     animation-duration: 0.3s;
     animation-fill-mode: forwards;
   }

   @keyframes r0to90 {
     from {
    transform:rotateX(0deg);
     }

     to {
    transform: rotateX(90deg);
     }
   }

   @keyframes r90to0 {
     from {
    transform: rotateX(90deg);
     }

     to {
    transform: rotateX(0deg);
     }
   }

   @keyframes r0to_90 {
     from {
    transform: rotateX(0deg);
     }

     to {
    transform: rotateX(-90deg);
     }
   }

   @keyframes r_90to0 {
     from {
    transform: rotateX(-90deg);
     }

     to {
    transform: rotateX(0deg);
     }
   }

   .transform0to_90 {
     transform: rotateX(-90deg);
   }

   .transform0to90 {
     transform: rotateX(90deg);
   }
   .hide{
    display:none
   }
   .zIndex2 {
     z-index: 2;
   }

   .zIndex4 {
     z-index: 4;
   }

   .zIndex10 {
     z-index: 10;
   }
   .blue{
      background-color: blue
   }
   .green{
      background-color: green
   }
   .red{
      background-color: red
   }
   .orange{
     background-color: orange
   }
  </style>
  <script>
   let baseDiv,lowerDiv,middleDiv,upperDiv;
   document.addEventListener("DOMContentLoaded",()=>{
    baseDiv=document.getElementById("base");
    lowerDiv=document.getElementById("lower");
    middleDiv=document.getElementById("middle");
    upperDiv=document.getElementById("upper");
   });
   let backward=()=>{
       middleDiv.innerHTML=baseDiv.innerHTML;
    lowerDiv.classList.add("rotate0to90");
    middleDiv.className="upperHalfCard-after transform0to_90 zIndex4";
   }
   let forward=()=>{
    middleDiv.innerHTML=baseDiv.innerHTML;
    upperDiv.classList.add("rotate0to_90");
    middleDiv.className="lowerHalfCard-after transform0to90 zIndex4";
   }
   
   let upperHandler=()=>{
    middleDiv.classList.add("rotate90to0");
    upperDiv.classList.replace("zIndex4","zIndex2");    
   }
   let lowerHandler=()=>{
    lowerDiv.classList.replace("zIndex4","zIndex2");
    middleDiv.classList.add("rotate_90to0");    
   }
   let middleHandler=()=>{
    upperDiv.innerHTML=baseDiv.innerHTML;
    lowerDiv.innerHTML=baseDiv.innerHTML;
    middleDiv.className="hide";
    upperDiv.className="upperHalfCard-after zIndex4";
    lowerDiv.className="lowerHalfCard-after zIndex2";
   }
  </script>
 </head>
 <body>
  <div class="splitFlap">
   <div 
    id="base" 
    class="fullCard-after zIndex2">
    <img src="img/1_100.png">
   </div>
   <div 
    class="upperHalfCard-after zIndex4"
    id="upper"
    onAnimationEnd="upperHandler()">
    <img src="img/0_100.png">
   </div>
   <div 
    id="middle"
    class="hide"
    onAnimationEnd="middleHandler()">
   </div>
   <div
    class="lowerHalfCard-after zIndex2" 
    id="lower"
    onAnimationEnd="lowerHandler()">
    <img src="img/0_100.png">
   </div>
  </div>
  <p>
   <button onClick="forward()">
     +
   </button>
   <button onClick="backward()">
    -
   </button>
   <button onClick="setHinge()">Set Hinge</button>
  </p>
 </body>
</html> 

I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?

Asked by knvbhk 6 months ago

Last reply by cor-el 6 months ago

  • Archived

Deeplinks don't work properly in Firefox

Hi - I have an affiliate marketing business which uses deeplinks to take my visitors to specific product pages on third party websites. These work fine in Google Chrome … (read more)

Hi - I have an affiliate marketing business which uses deeplinks to take my visitors to specific product pages on third party websites. These work fine in Google Chrome but on Firefox the deeplink goes to the website homepage only. Does anyone know what I can do about this? thanks Gina

Asked by ginarosemartin 7 months ago

Last reply by FredMcD 7 months ago

  • Archived

since v99 css filter pixelates background image

Hello, hope this is a good place to ask about my issue with the new version Firefox version 99: For showing images on a website I create divs with css3d rendered png bac… (read more)

Hello,

hope this is a good place to ask about my issue with the new version Firefox version 99:

For showing images on a website I create divs with css3d rendered png background-images (scaled down through css transforms from 1000px x 1000px) and later apply css filters eg. "filter:drop-shadow(red 10px 10px 10px)".

Tested on various Win10 and MacOs machines with v98.0.2 and older, images get displayed with a drop-shadow in best quality. Updating to v99, once any filter gets applied (through dev console or through js within my software) the image quality is reduced a lot, which did not happen before. I attached a sample image from v99 (left: added filter, right: same image without filter).

When scaling the websites zoom factor to 500% the images will be displayed correctly without any quality loss. Scaling to 30% results in a very bad render.

I tried applying image-rendering to no avail. It would visibly change the render mode, but not improve the actual quality. The pixelated image would still be pixelated with the new render mode.

I'm not sure how to further tackle this problem and hope someone could help with this issue.

Thanks Max

Asked by max 7 months ago

Last reply by FredMcD 7 months ago

  • Archived

Image display limits

Hi, Are there any limits (count, area, size, weight) for displaying images on a webpage? I'm working on a website that should display a large amount of images on one of i… (read more)

Hi,

Are there any limits (count, area, size, weight) for displaying images on a webpage?

I'm working on a website that should display a large amount of images on one of its pages, however FF displays only part of them. When I downsize their dimensions more of them are displayed, when I use their lower resolution (lighter in weight) versions, more of them are displayed.

I remember, I read somewhere a few years ago that there is a limit for weight of images on a single page, which could be observed for example on a carousel with large amount of slides.

This issue doesn't seem to affect other browsers.

Unfortunately I can't find this nor any other article / post that specifies what are those limits.

Thanks, Z

Asked by Zeeto 8 months ago

Last reply by jonzn4SUSE 8 months ago

  • Archived

Firefox caching shopping cart incorrectly

Hi, I am having an issue with a website I am developing, which I am only seeing in Firefox. To reproduce please try the following: 1. Go to https://mymummyteacher.com/sto… (read more)

Hi,

I am having an issue with a website I am developing, which I am only seeing in Firefox. To reproduce please try the following:

1. Go to https://mymummyteacher.com/store and add a product to the cart. 2. Close the tab / browser 3. Go back to https://mymummyteacher.com/store and add a product to the cart. The single product that has been just added is shown, however the Subtotal and Total are showing as if the previously added product is still in there too.

If I do a hard reload (hold down shift), all the other products then appear. So I think this is an issue with caching. I am not seeing it on other browsers. Is this a bug, or is there something I can do to stop it happening?

Thanks

Asked by mike475 1 year ago

Last reply by FredMcD 1 year ago

  • Archived

Plugins & Profile directory

I have tried on windows and on linux, and the same thing happens for both. I don't get the plugins i should have. I want to try and enable java, but its not even appearin… (read more)

I have tried on windows and on linux, and the same thing happens for both. I don't get the plugins i should have. I want to try and enable java, but its not even appearing in the first place. My profile directory is all messed up as well. I don't have a pluginreg.dat, my extensions.sqlite is an extensions.json. I have been reading all the forums but they mention stuff about the files in the profile, but I don't have those files.

Asked by caedenperelliharris 1 year ago

Last reply by FredMcD 1 year ago

  • Archived

plugin do firefox quebra a segurança configurada do pdf, permitindo a impressão

Tenho uma rede com mais de 500 computadores, publico documentos em pdf com bloqueamento de impressão na intranet, o firefox tem o plugin de pdf nativo e esse plugin quebr… (read more)

Tenho uma rede com mais de 500 computadores, publico documentos em pdf com bloqueamento de impressão na intranet, o firefox tem o plugin de pdf nativo e esse plugin quebra a segurança configurada do pdf, que no caso foi bloqueada a impressão e no firefox qualquer usuário consegue imprimir. Gostaria de saber como faço para desabilitar o plugin nativo pdf do firefox para todos os usuarios e que não consigam mais ter acesso em mudar a configuração, igual como fazemos com as configurações de proxy, onde fica desabilidado para o usuário a alteração

Asked by claudia.pereira 1 year ago

Last reply by cor-el 1 year ago

  • Archived

Log In Problem

I am running a sports blog and want to appear on every single browser, but the problem is that the Firefox browser creates some log inissues when I want to go to the back… (read more)

I am running a sports blog and want to appear on every single browser, but the problem is that the Firefox browser creates some log inissues when I want to go to the backend of my this is my site website. Please anyone out there can help me?

Asked by khanumarpk80 1 year ago

Last reply by Paul 1 year ago

  • Archived

My cache is making firefox not load pages

I am having an issue every 5 minutes where firefox will not load any pages it essential makes me stuck on the page. I have to than clear my cache for it to work again onl… (read more)

I am having an issue every 5 minutes where firefox will not load any pages it essential makes me stuck on the page. I have to than clear my cache for it to work again only to have the issue again a couple of minutes later. I have refreshed firefox 4 different times, uninstalled 3 times to no but nothing seems to work.

Asked by yusoff95 1 year ago

Last reply by cor-el 1 year ago

  • Archived

Password Manager

As a developer, I am trying to disable the Password Manager feature in my webapplication across browsers. When I typed some value in input type password mentioned mdn doc… (read more)

As a developer, I am trying to disable the Password Manager feature in my webapplication across browsers. When I typed some value in input type password mentioned mdn docs and navigsted away it doesnot trigger Save Password. But it is triggering anywhere else like online ide's and all.

I would like to know how it is disabled in MDN docs.

Asked by suraj.panayanchery 1 year ago

Last reply by cor-el 1 year ago

  • Archived

How do i noninteractively install firefox on windows?

I need a way to install firefox from command prompt entirely automatically, so that i can include it in a batch script i'm making. I've googled around, but all the tutori… (read more)

I need a way to install firefox from command prompt entirely automatically, so that i can include it in a batch script i'm making. I've googled around, but all the tutorials are either for Linux or require you to download the file with another browser.

Asked by valkyrie_pilot 1 year ago

Last reply by cor-el 1 year ago

  • Archived

Can someone add my keyboard addon to the list of keyboardss/dictionaries?

Hi, I have just created a keyboard for Firefox, the Bislama Dictionary for Firefox. I was wondering if someone could add it to the list of dictionaries. The local name fo… (read more)

Hi, I have just created a keyboard for Firefox, the Bislama Dictionary for Firefox. I was wondering if someone could add it to the list of dictionaries. The local name for Bislama is just Bislama. Thanks.

Asked by oliver.palmer5 1 year ago

Last reply by cor-el 1 year ago

  • Archived

Rendering Glitches in Firefox/Firefox Developer Edition

The First Image is of the URL bar. If you look closely, some of the parts are chipped. The Second Image is of a Button. It's chipped in all sides. The Third Image is a… (read more)

  1. The First Image is of the URL bar. If you look closely, some of the parts are chipped.
  2. The Second Image is of a Button. It's chipped in all sides.
  3. The Third Image is a string of dots and hyphens that I've selected with my cursor. It's weirdly torn in the middle.

The Issue is on both Firefox Developer Edition and the normal Firefox. Both are the latest versions. Both are installed on my OS.

I'm on Parrot OS 4.11. I've tried changing the window compositor which is Metacity(Marco) but that doesn't solve the issue. Kernel is 5.10.0-6parrot1-amd64. I'm running on integrated graphics. No third-party graphics driver.

I have Ubuntu installed too and the problem isn't there in Ubuntu. So It's in Parrot. I heavily use Firefox for Web Surfing and Development.

All of them are fresh installs from the official website.

Asked by modifieddead24 1 year ago

Last reply by FredMcD 1 year ago

  • Archived

Need help in checking the dom node position for different screen resoultions

Hi, We are working on an Open Source Chrome extension: Digital Assistant Client I am recording the domnode by converting into json by domJson and saving into server. We c… (read more)

Hi,

We are working on an Open Source Chrome extension: Digital Assistant Client

I am recording the domnode by converting into json by domJson and saving into server. We can find the same recordednode by comparing the json attributes and matching to the original node on the page. We have one problem here when we search for the nodes sometimes we get similar nodes via json which has same property names. In that case we are trying to match the node position that we have recorded. When we try to match the node position in different screen resolutions, it gives us the wrong node. How do we solve this. My code is as given below

// calculate distance between selected node and matching node getDistance: function (node1, node2) {

  const x = node1.x - node2.x;
  const y = node1.y - node2.y;
  const dist = Math.abs(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
  return dist;

},

Asked by yureshwar 1 year ago

Last reply by FredMcD 1 year ago

  • Archived

DEAR SIRS, PLEASE HELP How to remove brower hijacked by 'a.horsered.com' on my blog:https://rightwaystechnologies.blogspot.com/

DEAR SIRS, PLEASE HELP How to remove Brower hijacked by 'a.horsered.com' on my blog:https://rightwaystechnologies.blogspot.com/ THANKS RICHARD rightwayspro@gmail.com … (read more)

DEAR SIRS, PLEASE HELP How to remove Brower hijacked by 'a.horsered.com' on my blog:https://rightwaystechnologies.blogspot.com/

THANKS

RICHARD rightwayspro@gmail.com

Asked by Richard 1 year ago

Last reply by FredMcD 1 year ago

  • Archived

media protection against illegal copy

Hi, I am designing a website for viewing photos like pay per view system. When an user push the shortcut CTRL+S, is there a fonctionnality to disable the media storage by… (read more)

Hi, I am designing a website for viewing photos like pay per view system. When an user push the shortcut CTRL+S, is there a fonctionnality to disable the media storage by permissions for example? I have tried to disable indirectly with keypress event listener but it seems there is a browser privilege for his shortcuts. More, what are the fonctionnalities you provide to help webdesigners to secure their websites? I understand and I agree about the work you make for users against tracking and for confidentiallity on the web. Regards, Thierry Lacouloumere

Asked by lacouloumere.thierry 1 year ago

Last reply by cor-el 1 year ago

  • Archived

Website layout is showing different than original

Hello, I'm using Firefox to manage my website but when I open my blog in Firefox my site's layout is not showing like the original one with header menu but showing mobile… (read more)

Hello, I'm using Firefox to manage my website but when I open my blog in Firefox my site's layout is not showing like the original one with header menu but showing mobile toggle menu on Desktop, in Chrome it's showing with header menu, I don't know what's the reason behind it, my users also complained about that, can someone open my site in Mozilla to confirm if they are also experiencing it or only me? Screenshot of Mozilla and Chrome is also attached below. Thanks! Here is my blog: https://writions.com/

Asked by kovise1121 1 year ago

Last reply by cor-el 1 year ago

  • Archived

Why, there is no support for ' CSS Backdrop Filter' ?

Hello, I'm on the way to be a web developer. But, when it comes to add Glassmorphism effect, it seems like firefox doesn't support CSS property called "backdrop-filter". … (read more)

Hello, I'm on the way to be a web developer. But, when it comes to add Glassmorphism effect, it seems like firefox doesn't support CSS property called "backdrop-filter". Will there be any support for this in near future?

I'm using Firefox For Linux v88.0 (64-bit).

Asked by abir.sheikh.4044 1 year ago

Last reply by TyDraniu 1 year ago